<template>
    <span>
      <span v-if="mode==='text'">
        {{inputValue}} <i style="cursor:pointer " @click="switchModel('input')" class="el-icon-edit"></i>
      </span>
      <span v-if="mode==='input'">
        <el-input :value="inputValue" :maxlength="30" @input="eInput" class="mini-input"></el-input>
        <i style="cursor:pointer" @click="save" class="el-icon-check"></i>
      </span>
    </span>
</template>

<script>
  export default {
    name: "MiniEditInput",
    props: ['value','itemData'],
    data() {
      return {
        inputValue: this.value,
        mode: 'text'
      }
    },
    methods: {
      eInput(value) {
        this.inputValue = value
      },
      switchModel(model) {
        this.mode = model
      },
      async save() {
        await this.$emit('save', this);
      }
    }
  }
</script>

<style scoped>
  .mini-input {
    display: inline-block;
    width: auto;
    font-size: inherit;
  }
</style>
